<template>
    <div class="chatbox-main">
        <chat-box-title></chat-box-title>
        <div class="msg-pane">
            <div class="msg" id="msg">
                <ul>
                    <li v-for="c in chat.msgs" :key="c">
                        <div v-if="c.isMe" class="me">
                            <div class="me-msg" v-html="c.content"></div>
                            <img src="@/assets/haha.jpg" width="33" height="33">
                        </div>
                        <div v-else class="other">
                                <img :src="chat.img" width="33" height="33">
                                <div class="other-msg" v-html="c.content"></div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="input-pane">
            <chat-box-input>发送(S)</chat-box-input>
        </div>
    </div>
</template>

<script>
import {
    reactive,
    toRefs
} from "vue";
import ChatBoxTitle from '@/components/ChatBoxTitle.vue'
import ChatBoxInput from '@/components/ChatBoxInput.vue'

export default {
    name: "ChatBox",
    components: {
        ChatBoxTitle,
        ChatBoxInput
    },

    setup() {
        const state = reactive({
            chat: {
                    img: require('@/assets/haha.jpg'),
                    name: '小芳',
                    type: 'user',
                    msgs: [{
                        isMe: false,
                        content: '天王盖地虎天王盖地虎天王盖地虎天王盖地虎天王盖地虎天王盖地虎天王盖地虎天王盖地虎天王盖地虎天王盖地虎天王盖地虎天王盖地虎天王盖地虎天王盖地虎天王盖地虎天王盖地虎天王盖地虎天王盖地虎天王盖地虎天王盖地虎',
                        time: new Date().getTime()
                    }, {
                        isMe: true,
                        content: '天王盖地虎天王盖地虎天王盖地虎天王盖地虎天王盖地虎天王盖地虎天王盖地虎天王盖地虎天王盖地虎天王盖地虎天王盖地虎天王盖地虎天王盖地虎天王盖地虎天王盖地虎天王盖地虎天王盖地虎天王盖地虎天王盖地虎天王盖地虎',
                        time: new Date().getTime()
                    }],
                    groupId: 4,
                    unRead: 5
                }
        });

        function db() {
            let a = window.getSelection()
            //a.selectAllChildren(document.getElementById('input'))
            console.log(a)
        }

        return {
            ...toRefs(state),
            db
        };
    },
};
</script>

<style lang="scss" scoped>
.chatbox-main {
    
    background: #f6f6f7;
    display: flex;
    flex-direction: column;

    .msg-pane {
        -webkit-app-region: no-drag;
        width: 100%;
        flex: 1;
        .msg {
            // border-top: 1px solid @borderColor;
            // background-color: @viewBgc;
            width: 100%;
            overflow-y: auto;
            
            &::-webkit-scrollbar {
                // background-color: @viewBgc;
            }
        
            ul {
                margin: 0;
                padding: 0;
                
                li {
                    padding: 5px 0;
                    height: 100%;
                    word-wrap: break-word;
                    word-break: break-all;
                    overflow: hidden;
                    
                    img {
                        border-radius: 4px;
                    }
                    .other {
                        padding: 8px 10px;
                        max-width: 80%;
                        font-size: small;
                        
                        display: flex;
                        min-height: 37px;

                        img {
                            display: none;
                        }

                        .other-msg {
                            background-color: #e8e8e9;
                            display: flex;
                            align-items: center; 
                            border-radius: 4px;
                            padding: 6px 10px;
                            text-align: left;
                        }
                    }
                    
                    .me-img {
                        position: absolute;
                        right: 0;
                    }
                    
                    .me {
                        max-width: 80%;
                        float: right;
                        margin-right: 10px;
                        font-size: small;
                        border-radius: 4px;
                        padding: 8px 10px;
                        color: black;

                        display: flex;
                        min-height: 37px;

                        .me-msg {
                            background-color: #e8e8e9;
                            display: flex;
                            align-items: center; 
                            border-radius: 4px;
                            padding: 6px 10px;
                            margin-right: 10px;
                            text-align: left;
                        }
                    }
                }
            }
        }
    }
    .input-pane {
        height: 190px;
        -webkit-app-region: no-drag;
    }
}
</style>

